<script setup lang="ts">
import { defineAsyncComponent, ref } from "vue";
import BoxBlock from "../components/boxBlock.vue";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";

const StatisticsPie = defineAsyncComponent(
  () => import("../components/statisticsPie.vue")
);
const tableData: any = ref([]);

const getData = () => {
  tableData.value = [
    {
      name: "重庆吉宇物业管理有限公司",
      time: "2023-11-01",
    },
    {
      name: "成都xxxx物业管理有限公司",
      time: "2023-11-01",
    },
    {
      name: "天井xxxx物业管理有限公司",
      time: "2023-10-01",
    },
    {
      name: "重庆渝地物业服务有限公司",
      time: "2023-04-02",
    },
    {
      name: "重庆市城市害虫防治研究所有限公司",
      time: "2023-07-03",
    },
    {
      name: "重庆渝地实业发展有限公司",
      time: "2023-08-01",
    },
    {
      name: "重庆祥安实业有限公司",
      time: "2023-05-01",
    },
    {
      name: "重庆大华实业发展有限公司",
      time: "2023-19-01",
    },
  ];
};
getData();
</script>
<template>
  <div class="flex flex-col">
    <BoxBlock class="h-1/3" title="数据统计">
      <div>
        <div class="flex items-center">
          <div class="flex relative items-center">
            <img
              class="h-25 w-90"
              src="../assets/newPage_ltitle.461af472.png"
              alt=""
            />
            <div class="absolute left-30 mb-2 text-2xl">已接入收费单位数量</div>
          </div>
          <div>
            <span class="text-3xl text-yellow-400">27</span>
            家
          </div>
        </div>
        <div class="flex flex-wrap">
          <div class="w-1/2 mb-10 flex">
            <div>
              <img class="h-15 w-15" src="../assets/bill.f6711db0.png" alt="" />
            </div>
            <div class="flex flex-col ml-5 justify-between">
              <div class="text-2xl">累计开票笔数</div>
              <div><span class="text-3xl numberTotal-text">5210</span>笔</div>
            </div>
          </div>
          <div class="w-1/2 mb-10 flex">
            <div>
              <img
                class="h-15 w-15"
                src="../assets/split.6c061d65.png"
                alt=""
              />
            </div>
            <div class="flex flex-col ml-5 justify-between">
              <div class="text-2xl">累计清分笔数</div>
              <div><span class="text-3xl numberTotal-text">325210</span>笔</div>
            </div>
          </div>
          <div class="w-1/2 mb-5 flex">
            <div>
              <img
                class="h-15 w-15"
                src="../assets/billNum.a2dad8b0.png"
                alt=""
              />
            </div>
            <div class="flex flex-col ml-5 justify-between">
              <div class="text-2xl">累计开票金额</div>
              <div>
                <span class="text-3xl numberTotal-text">12306</span>万元
              </div>
            </div>
          </div>
          <div class="w-1/2 mb-5 flex">
            <div>
              <img
                class="h-15 w-15"
                src="../assets/splitNum.eb462695.png"
                alt=""
              />
            </div>
            <div class="flex flex-col ml-5 justify-between">
              <div class="text-2xl">累计清分金额</div>
              <div>
                <span class="text-3xl numberTotal-text">454.07</span>万元
              </div>
            </div>
          </div>
        </div>
      </div>
    </BoxBlock>
    <BoxBlock class="h-1/3" title="收款方式统计">
      <StatisticsPie />
    </BoxBlock>
    <BoxBlock class="h-1/3" title="接入单位信息">
      <div class="flex justify-between text-2xl">
        <div>公司名称</div>
        <div>接入时间</div>
      </div>
      <vue3-seamless-scroll
        class="seamless"
        :list="tableData"
        :hover="true"
        :step="0.3"
        :wheel="true"
        :isWatch="true"
      >
        <div
          class="flex justify-between"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <p>{{ item.name }}</p>
          <p>{{ item.time }}</p>
        </div>
      </vue3-seamless-scroll>
    </BoxBlock>
  </div>
</template>
<style scoped lang="less">
.numberTotal-text {
  color: #50e0fa;
}
.seamless {
  width: 100%;
  height: 220px;
  overflow: hidden;
}
</style>
